<template>
  <div class="common-layout">
    <a-layout>
      <a-layout-header class="a-layout-header" :style="{ position: 'fixed', zIndex: '1' }">
        <div class="headerLeft">
          <img src="../assets/image/logo.png" alt="" />
        </div>
        <div class="headerRight">
          <div class="headerRight-nav">
            <div class="ty">
              <span class="sn">免费模板</span><span class="an">HOT</span>
              <span class="sn">开通会员</span>
              <span class="sn">产品服务</span>
              <span class="sn">解决方式</span>
              <span class="sn">内容中心</span>
              <span class="sn">资源与合作</span>
              <div class="div">
                <div class="hand">
                  <div class="z">电子邀请函</div>
                  <div class="ul">
                    <ul>
                      <li>开业邀请函</li>
                      <li>宴会邀请函</li>
                      <li>年会邀请函</li>
                      <li>商务邀请函</li>
                      <li>展会邀请函</li>
                      <li>毕业邀请函</li>
                      <li>毕业典礼邀请函</li>
                    </ul>
                  </div>
                </div>
                <div class="hand">
                  <div class="z">在线招聘</div>
                  <div class="ul">
                    <ul>
                      <li>校园招聘</li>
                      <li>社会招聘</li>
                      <li>实习招聘</li>
                      <li>兼职招聘</li>
                      <li>互联网招聘</li>
                      <li>销售招聘</li>
                      <li>教师招聘</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="headerRight-login">
           <el-button type="primary" color="#006eff">登录</el-button>
            <el-button plain>注册</el-button>
            
          </div>
        </div>
      </a-layout-header>
      <a-layout-content :style="{ marginTop: '50px' }">
        <div
          :style="{
            background: '#fff',
            minHeight: '800px',
            minWidth: '1080px',
            width: '100%',
            display: 'flex'
          }"
        >
          <div class="sider">
            <p class="p1"><img class="img" src="../assets/image/1.jpg" alt="" />精选推荐</p>
            <p class="p1">
             <img class="img" src="../assets/image/2.jpg" alt="" @click="gong"/>工作台
            </p>
            <p class="p1"><img class="img" src="../assets/image/3.jpg" alt="" />偏好设计</p>
            <p class="p1"><img class="img" src="../assets/image/4.jpg" alt="" />偏好设置</p>
            <p class="p1"><img class="img" src="../assets/image/5.jpg" alt="" />我的收藏</p>
            <span>创意设计</span>
            <p class="p1"><img class="img" src="../assets/image/6.jpg" alt="" />H5</p>
            <p class="p1"><img class="img" src="../assets/image/7.jpg" alt="" />海报</p>
            <p class="p1"><img class="img" src="../assets/image/8.jpg" alt="" />长页</p>
            <p class="p1"><img class="img" src="../assets/image/9.jpg" alt="" />表单</p>
            <p class="p1"><img class="img" src="../assets/image/10.jpg" alt="" />互动</p>
            <p class="p1"><img class="img" src="../assets/image/11.jpg" alt="" />电子画册</p>
            <p class="p1"><img class="img" src="../assets/image/12.jpg" alt="" />视频</p>
            <p class="p1"><img class="img" src="../assets/image/13.jpg" alt="" />数字人</p>
            <p class="p1"><img class="img" src="../assets/image/14.jpg" alt="" />AI创作</p>
            <p class="p1"><img class="img" src="../assets/image/15.jpg" alt="" />营销工具</p>
            <p class="p1"><img class="img" src="../assets/image/16.jpg" alt="" />作图工具</p>
            <span>其他</span>
            <p class="p1"><img class="img" src="../assets/image/17.jpg" alt="" />案例中心</p>
            <p class="p1"><img class="img" src="../assets/image/18.jpg" alt="" />正版素材</p>
            <p class="p1"><img class="img" src="../assets/image/19.jpg" alt="" />成为设计师</p>
          </div>
          <div class="main">
            <router-view></router-view>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter(); 


const gong=()=>{
 router.push({
  path:'/home/work'
 })
}


</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.el-button {
  height: 0;
  font-size: 12px;
  padding: 14px 18px;
}

.headerRight {
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headerLeft img {
  width: 55%;
  margin-left: 14px;
}

.headerLeft {
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
}

.a-layout-header {
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 4px rgb(225, 225, 225);
  padding: 0;
  display: flex;
}

.main {
  width: calc(100% - 200px);
  margin-left: 200px;
  float: right;
}

.p1 {
  line-height: 42px;
  padding-left: 20px;
  color: #000;
  box-sizing: border-box;
}

.img {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}

.p1:hover {
  width: 200px;
  height: 45px;
  background: #eef4ff;
  font-weight: 700;
}

.sider {
  width: 180px;
  background-color: rgb(255, 255, 255);
  /* min-height: 800px; */

  position: fixed;
  left: 0;
}

.sider span {
  font-size: 12px;
  color: #999;
  margin-left: 20px;
  line-height: 30px;
}

#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

.common-layout {
  width: 100vw;
  height: 100vh;
  background: #000;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.sn {
  position: relative;
  margin: 10px;
}
.sn:hover{
  color: blue;
}
.an {
  background: red;
  color: #fff;
  font-size: 10px;
  position: absolute;
  width: 30px;
  height: 10px;
  border-radius: 15px;
  text-align: center;
  line-height: 10px;
  top: 8px;
  left: 230px;
}

.sn {
  position: relative;
}
.div {
  width: 100vw;
  height: 500px;
  font-size: 15px;
  background: #fff;
  box-shadow: 3px 3px 3px #000;
  position: absolute;
  left: 0px;
  top: 60px;
  display: none;
  z-index: 111111;
}
.z {
  line-height: 20px;
}
.hand {
  width: 100vw;
  height: 70px;
  line-height: 20px;
}
.end {
  width: 100vw;
  height: 70px;
  line-height: 20px;
  float: left;
}
.ul li {
  float: left;
  margin-left: 20px;
}
.ul {
  margin-left: 75px;
  margin-top: -20px;
}
.ty:hover .div {
  display: block;
}
.div:hover {
  display: block;
}
</style>
